<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      {{formattedTime}}
      <br/>
      欢迎使用SOP Admin , {{formatAxis(new Date())}}
    </div>
    <div style="display:flex;gap:100px 100px">
      <svg-icon icon-class="dashboard"></svg-icon>
      <svg-icon icon-class="example"></svg-icon>
      <svg-icon icon-class="eye-open"></svg-icon>
      <svg-icon icon-class="eye"></svg-icon>
      <svg-icon icon-class="form"></svg-icon>
      <svg-icon icon-class="link"></svg-icon>
      <svg-icon icon-class="nested"></svg-icon>
      <svg-icon icon-class="password"></svg-icon>
      <svg-icon icon-class="table"></svg-icon>
      <svg-icon icon-class="tree"></svg-icon>
      <svg-icon icon-class="user"></svg-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref,onMounted,onUnmounted,getCurrentInstance} from 'vue'
import {formatDate,formatAxis} from '@/utils/formatTime'
import request from '@/utils/request'
const cxt=getCurrentInstance();
const userInfo = ref(null);
const formattedTime = ref('');
// 在组件挂载后开始定时更新时间
let timerId: string | number | NodeJS.Timeout | undefined;
const fetchUserInfo = async () => {
  try {
    const response = await request({
    url: '/api/user/get',
    method: 'get',
    params: { token:'admin-token' }
  });
    userInfo.value = response.data; // Assuming response.data contains the user info
  } catch (error) {
    console.error('Failed to fetch user info:', error);
  }
};
//console.log(cxt?.appContext.app.config.globalProperties)
const formatCurrentTime=()=>{
  formattedTime.value=formatDate(new Date(),'YYYY-mm-dd HH:MM:SS')
}
onMounted(async () => {
  formatCurrentTime()
  timerId = setInterval(formatCurrentTime, 1000); // 每秒更新一次时间
  await fetchUserInfo();
  console.log('Dashboard mounted');
});
onUnmounted(()=>{
  clearInterval(timerId);
  console.log('Dashboard unmounted');
})
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 18px;
    line-height: 46px;
  }
}
</style>
